<template>
    <div :class="type">
        <table class="table_comp" ref="scrollTable" :id="tbPos" :class="length1 > 3 ? '' : 'less1'">
            <thead>
                <tr v-if="tableData.titles1">
                    <td ref="tr1">0</td>
                    <td></td>
                    <td v-for="(data, index) in tableData.titles1" :key="index">
                        {{ data }}
                    </td>
                </tr>
                <tr>
                    <td>区域</td>
                    <td>占位</td>
                    <td v-for="(data, index) in tableData.titles2" :key="index">
                        {{ data }}
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(area, index) in tableData.areas" :key="index">
                    <td :data-id="area.areaId" @click="drillDown($event)" :class="[area.areaId === '9999' ? 'disabled' : '']">
                        {{ area.areaName }}
                    </td>
                    <td>{{ area.areaName }}</td>
                    <td v-for="(value, index) in area.values" :key="index" @click="toCharts($event)" :class="markRed(value)">
                        {{ formatNumber(value) }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import { mapGetters } from "vuex"
import { Toast } from "vant"
import { useStore } from "vuex"
import { useRouter } from "vue-router" //1.引入useRoute
import { reactive, ref, toRefs, onMounted, nextTick, watch } from "vue"
export default {
    props: [
        "propData",
        "pos",
        "minDate",
        "maxDate",
        "isArea",
        "tabIndex",
        "name"
    ],
    //监听属性 类似于data概念
    computed: {
        ...mapGetters([
            "token",
            "mmsId",
            "foldId",
            "categoryId",
            "day",
            "areaLevel",
            "presentLevel",
            "type",
            "drill",
            "areaId"
        ])
    },
    setup(props) {
        let tr1 = ref(null)
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            tableData: {},
            loading: false,
            tbPos: "",
            length1: 0,
            params: {
                token: "",
                day: "",
                categoryId: "",
                mmsId: "",
                areaId: ""
            },
            level: 0
        })
        function SpanGrid(tabObjId, cellindex, beginRow) {
            var colIndex = cellindex
            var rowBeginIndex = beginRow
            var tabObj = document.getElementById(state.tbPos)
            if (tabObj != null) {
                var i, j, m, k, q, w, e, r
                var intSpan
                var strTemp
                m = 0
                //这个For循环是合并行
                for (k = 0; k < state.repeatTimes; k++) {
                    colIndex = k
                    for (i = rowBeginIndex; i < 1; i++) {
                        //tabObj.rows.length设置为2，只合并表头
                        intSpan = 1
                        m++
                        strTemp = tabObj.rows[i].cells[colIndex].innerText
                        for (j = i + 1; j < 1; j++) {
                            //tabObj.rows.length设置为2，只合并表头
                            if (
                                strTemp ==
                                tabObj.rows[j].cells[colIndex].innerText
                            ) {
                                intSpan++
                                tabObj.rows[i].cells[colIndex].rowSpan = intSpan
                                tabObj.rows[j].cells[colIndex].style.display =
                                    "none"
                            } else {
                                break
                            }
                        }
                    }
                }

                //这个For循环是合并列（无需合并列可删除）
                for (q = rowBeginIndex; q < 1; q++) {
                    //tabObj.rows.length设置为2，只合并表头
                    for (w = 0; w < state.repeatTimes; w++) {
                        intSpan = 1
                        let colspan = tabObj.rows[q].cells[w].rowSpan
                        strTemp = tabObj.rows[q].cells[w].innerText
                        if ("none" == tabObj.rows[q].cells[w].style.display) {
                            continue
                        }
                        for (e = w + 1; e < tabObj.rows[q].cells.length; e++) {
                            if (
                                "none" == tabObj.rows[q].cells[e].style.display
                            ) {
                                continue
                            }
                            let colspan1 = tabObj.rows[q].cells[e].rowSpan
                            if (
                                strTemp == tabObj.rows[q].cells[e].innerText &&
                                colspan == colspan1
                            ) {
                                intSpan++
                                tabObj.rows[q].cells[w].colSpan = intSpan
                                tabObj.rows[q].cells[e].style.display = "none"
                            } else {
                                break
                            }
                        }
                    }
                }
                i = j - 1
            }
            // let titles1 = this.tableData.titles1;
            if (tr1.value) {
                tr1.value.innerText = ""
            }
        }
        function formatTitle1(arr) {
            let numOfNull = 0
            if (arr) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i] == " ") {
                        //这里是空格不是空字符串
                        numOfNull++
                    }
                }
                if (numOfNull === arr.length) {
                    return true //无title1
                }
            }
        }
        function drillDown(event) {
            if (props.isArea === "area") {
                return
            }
            let drillLevel = 0
            let areaId = event.target.getAttribute("data-id")

            if (areaId === "9999") {
                return
            }
            /***********其他区域禁止下钻**************/

            // if(this.drill === false && this.areaId !== areaId){//type为1时需判断，areaId不一致禁止下钻
            //   Toast("该区域禁止下钻");
            //   return;
            // }
            /***********其他区域禁止下钻**************/
            if (router.currentRoute.value.name === "details") {
                if (store.state.areaLevel === 3) {
                    Toast("营销部暂不支持下钻")
                    return
                }
                if (
                    store.state.areaLevel === 0 ||
                    store.state.areaLevel === 1
                ) {
                    store.commit("setPreLevel", 0)
                    drillLevel = 0
                }
                if (store.state.areaLevel === 2) {
                    store.commit("setPreLevel", 1)
                    drillLevel = 1
                }
                store.commit("setPrevAreaId", areaId)
                router.push({
                    name: "drillDown",
                    params: {
                        areaId: areaId,
                        minDate: props.minDate,
                        day: props.maxDate,
                        drillLevel: drillLevel
                    }
                })
            }
        }
        function toCharts(event) {
            if (state.tabIndex === 0 && state.isArea === "area") {
                return
            }
            let td = event.target.parentNode.children[0]
            let area = td.innerText
            let areaId = td.getAttribute("data-id")
            let day = props.maxDate
            router.push({
                name: "charts",
                params: { areaId, area, day }
            })
        }
        function formatNumber(num) {
            if (num[0] === ".") {
                return parseFloat(num)
            } else if (num[0] === "-" && num[1] === ".") {
                return num.slice(0, 1) + "0" + num.slice(1)
            } else if (num > 10000 || num < -10000) {
                if (
                    (state.name === "收入" && store.state.foldId === "2") ||
                    (state.name === "集团欠费" && store.state.foldId === "6")
                ) {
                    return num
                } else {
                    return (num / 10000).toFixed(2) + "万"
                }
            } else if (num > 100000000) {
                return (num / 100000000).toFixed(2) + "亿"
            } else {
                return num
            }
        }
        function markRed(num) {
            if (num[0] === "-") {
                return "red"
            } else {
                return ""
            }
        }
        onMounted(() => {
            state.level = store.state.presentLevel
            state.tableData = props.propData
            state.length1 = state.tableData.titles2.length
            // console.log("state.tableData.titles2", state.tableData.titles2)
            let titles1 = state.tableData.titles1
            if (formatTitle1(titles1) === true) {
                delete state.tableData.titles1
            }
            state.tbPos = "tableComp" + props.pos
            state.repeatTimes = state.tableData.titles2.length + 2
            nextTick(() => {
                SpanGrid("", "", 0)
            })
        })
        return {
            ...toRefs(state),
            tr1,
            SpanGrid,
            markRed,
            formatTitle1,
            formatNumber,
            toCharts,
            drillDown
        }
    }
}
</script>

<style lang='scss' scoped>
.area {
    position: relative;
}
.table_comp {
    margin-top: 1px;
    tr td {
        background-color: #fff;
    }
    thead td:first-child {
        height: 30px;
        line-height: 30px;
    }
    thead tr:first-child td:nth-child(2) {
        height: 30px;
        line-height: 30px;
    }
    thead tr:first-child td {
        border-right: 1px solid #fff;
    }
    thead tr td {
        background: #45b8fb;
        color: #ffffff;
    }
    tbody td {
        // display: inline-block;
        vertical-align: middle;
    }
    tbody tr:nth-child(2n) td {
        background-color: #dedede;
    }
    tbody tr td.disabled {
        color: #666 !important;
    }
    tbody tr td:nth-child(2) {
        line-height: 30px;
    }
    td {
        padding: 0 10px;
        white-space: nowrap;
        font-size: 12px;
        text-align: center;
        min-height: 30px;
        vertical-align: middle;
    }
    td.red {
        color: #f00;
    }
    thead td {
        height: 30px;
    }
    tbody thead tr td {
        border: 1px solid #fff;
    }

    td:first-child {
        position: absolute;
        display: inline-block;
        padding: 0;
        padding-left: 20px;
        width: 100px;
        // height: 24px;
        white-space: normal;
        word-break: break-all;
    }
    tbody td:first-child {
        color: #45b8fb;
        min-height: 30px;
        line-height: 30px;
    }
    tbody td:nth-child(2) {
        padding-left: 20px;
        padding-right: 0;
    }
    td:nth-child(2) {
        display: inline-block;
        width: 100px;
        min-height: 30px;
        white-space: normal;
        word-break: break-all;
    }
}
table.less1 tr td:nth-child(2),
table.less1 tr td:first-child {
    min-width: 150px;
}
table {
    border-spacing: 0;
}
</style>